<template>
  <div class="materialresources">
    <main-title title="物资资源"></main-title>
    <div class="material">
      <div class="left">
        <div class="pieEchart" ref="pieEchart"></div>
        <div class="legend">
          <div class="legemdItem" v-for="(item, index) in pieData" :key="index">
            <div class="value">{{ item.value }}</div>
            <div class="label">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="barEchart" ref="barEchart"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let pieEchart = ref(null)
let barEchart = ref(null)
let myEchart = null
let myEchart1 = null
let color1 = [
  'rgba(0, 198, 253, 1)',
  'rgba(255, 178, 0, 1)',
  'rgba(241, 254, 14, 1)',
  'rgba(255, 83, 60, 1)'
]
let color2 = [
  'rgba(0, 198, 253, 0.1)',
  'rgba(255, 178, 0,0.1)',
  'rgba(241, 254, 14,0.1)',
  'rgba(255, 83, 60,0.1)'
]
let pieData = [
  { name: '矿泉水', value: 40 },
  { name: '消毒液', value: 10 },
  { name: 'N95口罩', value: 25 },
  { name: '防护服', value: 25 }
]
let xdata = ['1月', '2月', '3月', '4月', '5月', '6月']
let ydata = [
  [32, 42, 40, 44, 38, 25],
  [22, 34, 25, 35, 30, 15]
]
onMounted(() => {
  setPieEchart()
  setBarEchart()
})
const setPieEchart = () => {
  let data1 = []
  let data2 = []
  pieData.forEach((item, index) => {
    data1.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color1[index] },
      label: { color: color1[index] }
    })
    data2.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color2[index] },
      label: { color: color2[index] }
    })
  })
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(pieEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: 16 // 字体大小
      }
    },
    series: [
      {
        type: 'pie',
        center: ['34.5%', '50%'], //修改圆心位置
        radius: ['45%', '55%'], ////设置饼图默认的展开样式
        label: {
          formatter: (param) => {
            return `{b|${Math.round(param.percent) + '%'}}\n{d|${param.name.slice(
              0,
              4
            )}\n${param.name.slice(4)}}`
          },
          rich: {
            b: {
              fontSize: 32
            },
            d: {
              fontSize: 18
            }
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
          smooth: false,
          minTurnAngle: 90,
          maxSurfaceAngle: 90
        },
        itemStyle: {
          borderRadius: 5,
          borderWidth: 5
        },
        emphasis: {
          itemStyle: {
            borderWidth: 0,
            shadowBlur: 2,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          hoverAnimation: false
        },
        data: data1
      },
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['40%', '45%'],
        center: ['34.5%', '50%'], //修改圆心位置
        avoidLabelOverlap: false,
        label: {
          show: false //隐藏标示文字
        },
        labelLine: {
          show: false //隐藏标示线
        },
        tooltip: {
          show: false,
          trigger: 'none'
        },
        data: data2
      }
    ]
  }
  myEchart.setOption(option)
}
const setBarEchart = () => {
  if (myEchart1 != null && myEchart1 != '' && myEchart1 != undefined) {
    myEchart1.dispose() //销毁
  }
  myEchart1 = echarts.init(barEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['销售水量', '主营业务'],
      top: '4%',
      right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 15
      }
    },
    grid: {
      top: '15%',
      left: '5%',
      right: '0%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      data: xdata,
      axisLabel: {
        color: '#fff',
        fontSize: 14
        // rotate: 45
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      }
    },
    yAxis: {
      name: '单位：箱',
      nameTextStyle: {
        color: '#ffff',
        fontSize: 15
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 17
      },
      splitLine: {
        //修改背景线条样式
        show: true, //是否展示
        lineStyle: {
          type: 'dashed',
          color: '#5DC0FF',
          opacity: 0.35
        }
      }
    },
    series: [
      {
        type: 'bar',
        name: '入库',
        barWidth: 17,
        itemStyle: {
          // borderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 197, 241, 1)' },
            { offset: 0.5, color: 'rgba(58, 165, 209, 1)' },
            { offset: 1, color: 'rgba(40, 153, 199, 1)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: 'rgba(58, 165, 209, 1)'
          }
        },
        data: ydata[0]
      },
      {
        type: 'bar',
        name: '出库',
        barWidth: 17,
        itemStyle: {
          // borderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(233, 183, 104, 1)' },
            { offset: 0.5, color: 'rgba(210, 149, 71, 1)' },
            { offset: 1, color: 'rgba(184, 110, 31, 1)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: 'rgba(210, 149, 71, 1)'
          }
        },
        data: ydata[1]
      }
    ]
  }
  myEchart1.setOption(option)
}
</script>
<style scoped lang="scss">
.materialresources {
  .material {
    width: 100%;
    height: 410px;
    // background-color: red;
    display: flex;
    .left {
      width: 540px;
      height: 100%;
      background: url('@/assets/images/firstpage/pieBg.png') no-repeat;
      background-size: 230px 239px;
      background-position: 25% 50%;
      position: relative;
      .pieEchart {
        width: 540px;
        height: 410px;
        position: absolute;
        top: 5px;
        // left: -95px;
      }
      .legend {
        position: absolute;
        right: 0;
        top: 80px;
        .legemdItem {
          position: relative;
          margin-bottom: 13px;
          .label {
            font-size: 16px;
            color: #ffffff;
          }
          .value {
            font-size: 22px;
            font-weight: bold;
            color: #00c6fd;
          }
          &::before {
            content: '';
            position: absolute;
            width: 43px;
            height: 17px;
            border-radius: 2px;
            background-color: #00c6fd;
            top: 20px;
            left: -55px;
          }
          &:nth-child(2) {
            .value {
              color: #ffb200;
            }
            &::before {
              background-color: #ffb200;
            }
          }
          &:nth-child(3) {
            .value {
              color: #f1fe0e;
            }
            &::before {
              background-color: #f1fe0e;
            }
          }
          &:nth-child(4) {
            .value {
              color: #ff533c;
            }
            &::before {
              background-color: #ff533c;
            }
          }
        }
      }
    }
    .right {
      width: 550px;
      height: 100%;
      .barEchart {
        width: 550px;
        height: 410px;
      }
    }
  }
}
</style>
